<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>个人中心 - HiLover</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <jsp:include page="../common/header.jsp"/>
    
    <main class="main">
        <div class="profile-container">
            <div class="profile-header">
                <%--<div class="profile-avatar">
                    <img src="${empty user.avatar ? '/static/images/default-avatar.png' : user.avatar}"
                         alt="${user.username}" id="userAvatar">
                    <div class="avatar-upload">
                        <input type="file" id="avatarInput" accept="image/*" style="display: none;">
                        <button type="button" onclick="document.getElementById('avatarInput').click()">
                            更换头像
                        </button>
                    </div>
                </div>--%>
                <div class="profile-info">
                    <h2>${user.username}</h2>
                    <h2>${empty user.nickname ? user.username : user.nickname}</h2>
                    <p class="bio">${user.bio}</p>
                    <div class="info-list">
                        <p><i class="icon">性别：</i> ${user.gender == 1 ? '男' : user.gender == 2 ? '女' : '未设置'}</p>
                        <p><i class="icon">📬</i> ${empty user.email ? '未设置' : user.email}</p>
                    </div>
                    <button type="button" class="btn" onclick="showEditInfoModal()">编辑资料</button>
                    <button type="button" class="btn" onclick="showPasswordModal()">修改密码</button>
                </div>
            </div>
            
            <div class="profile-section">
                <h3>我的情侣</h3>
                <button onclick="window.location.href='/user/couple/add'" class="btn" style="width: 100px;margin: 10px">添加情侣</button>
                <div class="couple-grid">
                    <c:forEach items="${couples}" var="couple">
                        <div class="couple-card">
                            <div class="couple-avatars">
                                <img src="${couple.lover1Avatar}" alt="${couple.lover1Name}">
                                <img src="${couple.lover2Avatar}" alt="${couple.lover2Name}">
                            </div>
                            <div class="couple-info">
                                <h3>${couple.lover1Name} & ${couple.lover2Name}</h3>
                                <p>在一起 ${couple.daysTogether} 天</p>
                                <p>❤️ ${couple.likes}</p>
                            </div>
                            <div class="couple-actions">
                                <a href="/user/couple/${couple.id}/timeline/add" class="btn">添加记录</a>
                                <a href="/couples/${couple.id}" class="btn">查看详情</a>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>

            <div class="profile-section">
                <h3>我的点赞</h3>
                <div class="like-list">
                    <c:forEach items="${likeRecords}" var="record">
                        <div class="like-item">
                            <c:choose>
                                <c:when test="${record.type == 1}">
                                    <p>
                                        点赞了情侣
                                        <a href="/couples/${record.target_id}">
                                                ${record.coupleName}
                                        </a>
                                    </p>
                                </c:when>
                                <c:otherwise>
                                    <p>
                                        点赞了
                                        <a href="/couples/${record.coupleId}">
                                                ${record.coupleName}
                                        </a>
                                        下的评论:
                                        <span class="comment-content">"${record.commentContent}"</span>
                                    </p>
                                </c:otherwise>
                            </c:choose>
                            <p class="time">
                                <fmt:parseDate value="${record.create_time}" pattern="yyyy-MM-dd'T'HH:mm:ss" var="parsedDate"/>
                                <fmt:formatDate value="${parsedDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                            </p>
                        </div>
                    </c:forEach>
                </div>
            </div>
            
            <div class="profile-section">
                <h3>我的评论</h3>
                <div class="comment-list">
                    <c:forEach items="${comments}" var="comment">
                        <div class="comment-item">
                            <div class="comment-content">
                                <p>${comment.content}</p>
                                <p>
                                    评论了情侣 
                                    <a href="/couples/${comment.couple_id}">
                                        ${comment.couple_name}
                                    </a>
                                </p>
                            </div>
                            <p class="time">
                                <fmt:parseDate value="${comment.create_time}" pattern="yyyy-MM-dd'T'HH:mm:ss" var="parsedDate"/>
                                <fmt:formatDate value="${parsedDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                            </p>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 修改密码模态框 -->
    <div id="passwordModal" class="modal">
        <div class="modal-content">
            <h2>修改密码</h2>
            <form id="passwordForm">
                <div class="form-group">
                    <label>新密码</label>
                    <input type="password" name="password" required>
                </div>
                <div class="form-group">
                    <label>确认密码</label>
                    <input type="password" name="confirmPassword" required>
                </div>
                <div class="form-actions">
                    <button type="submit">保存</button>
                    <button type="button" onclick="closeModal('passwordModal')">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 资料编辑模态框 -->
    <div id="editInfoModal" class="modal">
        <div class="modal-content">
            <h2>编辑资料</h2>
            <form id="editInfoForm">
                <div class="form-group">
                    <label>昵称</label>
                    <input type="text" name="nickname" value="${user.nickname}" required>
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <select name="gender">
                        <option value="0" ${user.gender == 0 ? 'selected' : ''}>未设置</option>
                        <option value="1" ${user.gender == 1 ? 'selected' : ''}>男</option>
                        <option value="2" ${user.gender == 2 ? 'selected' : ''}>女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>邮箱</label>
                    <input type="email" name="email" value="${user.email}">
                </div>
                <div class="form-group">
                    <label>个人简介</label>
                    <textarea name="bio" rows="3">${user.bio}</textarea>
                </div>
                <div class="form-actions">
                    <button type="submit">保存</button>
                    <button type="button" onclick="closeModal('editInfoModal')">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <jsp:include page="../common/footer.jsp"/>
    <script src="/static/js/profile.js"></script>
</body>
</html> 